<template>
  <div id="box">
    <div id="login_box" class="my-dark animate">
      <h2><i class="r-y-g"></i><span>找回密码</span></h2>
      <el-form size="large" :model="state.ruleForm" :rules="state.rules" ref="ruleForm">
        <el-form-item prop="email">
          <el-input v-model="state.ruleForm.email" placeholder="账号绑定的邮箱" :prefix-icon="Message" clearable/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="state.ruleForm.password" type="password" show-password placeholder="设置密码" :prefix-icon="Key"/>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="state.ruleForm.code" :prefix-icon="Key" clearable maxlength="6" placeholder="邮箱验证码">
            <template #suffix>
              <el-link type="primary" :underline="false" @click="methods.emailVerify" :disabled="state.emailstate">{{ state.emailtime }}
              </el-link>
            </template>
          </el-input>
        </el-form-item>
        <el-button type="primary" class="w-100" @click="methods.reset()">确定</el-button>
      </el-form>
      <ul>
        <li>
          <router-link to="login">想起来了，去登陆</router-link>
        </li>
        <li>
          <router-link to="register">彻底忘了，立即注册</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {Avatar, Message, Key} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {reactive} from "vue";
import {reset,getMailCode} from "../api/user";
import index from "../router";

export default {
  name: "reset",
  setup() {
    const state=reactive({
      ruleForm: {
        email: '',
        password: '',
        code: '',
      },
      rules: {
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change']},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入邮箱验证码', trigger: 'blur'}
        ]
      },
      emailtime: '获取验证码',
      emailstate: false
    })
    const methods={
      VerifyTime(num){
        state.emailstate=true;
        state.emailtime=num;
        let time = setInterval(() => {
          if (state.emailtime === 1) {
            state.emailstate = false;
            state.emailtime = '获取验证码'
            clearInterval(time);
          } else {
            state.emailtime--;
          }
        }, 1000)
      },
      emailVerify(){
        getMailCode({email: state.ruleForm.email, type:'reset'}).then(res => {
          if (res.data.status) {
            ElMessage({
              message:res.data.message,
              type: 'success',
            })
            methods.VerifyTime(59);
          } else {
            if (res.data.error) {
              ElMessage({
                message: res.data.error,
                type: 'warning',
              })
              if (res.data.data.verifyTime) {
                methods.VerifyTime(res.data.data.verifyTime)
              }
            }
          }
        })
      },
      reset(){
        reset({
          email: state.ruleForm.email,
          password: state.ruleForm.password,
          code: state.ruleForm.code
        }).then(res => {
          if (res.data.status) {
            ElMessage({
              message: res.data.message,
              type: 'success'
            })
            setTimeout(()=>{
              index.replace('/login');
            },2000);
          } else {
            ElMessage({
              message: res.data.error,
              type: 'warning'
            })
          }
        })
      }
    }
    return {
      Avatar,
      Message,
      Key,
      state,
      methods
    }
  }
}
</script>
<style lang="less">
body {
  background: linear-gradient(45deg,rgb(206 212 218),rgb(0 123 255));
  height: 100%;
}

#app {
  height: 100%;
}

#box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#box::before {
  content: '';
  display: block;
}

#login_box {
  width: 400px;
  padding: 12px;
  margin:12px;
  background-color: #fff;
  border-radius: 4px;

  h2 {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i{
      vertical-align: middle;
    }
    span{
      vertical-align: middle;
      margin-left:12px;
    }
  }

  .el-form-item--large {
    margin-bottom: 16px;
  }

  ul {
    margin-top: 12px;
    text-align: center;
  }

  ul li {
    display: inline;
    padding: 0 12px;
    font-size: 12px;
  }

  ul li + li {
    border-left: 1px solid #5e676f;
  }
}

.el-link--inner {
  line-height: 40px;
  margin-right: 12px;
}
</style>
